// CSS files are now imported globally in index.js
import {
  Button,
  Typography,
  Card
} from 'antd';
import { Link } from 'react-router-dom';

const {
  Title,
  Paragraph
} = Typography;

function NotFound() {
  return (
    <div className="App" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
      <Card
        variant="outlined"
        style={{
          width: '100%',
          maxWidth: '500px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          padding: '24px',
          textAlign: 'center',
          border: 'none'
        }}
      >
        <Title level={2}>404</Title>
        <Paragraph>Page not found</Paragraph>
        <Paragraph>Sorry, the page you are looking for does not exist.</Paragraph>
        <Button type="primary" component={Link} to="/">
          Go to Home
        </Button>
      </Card>
    </div>
  );
}

export default NotFound;